import React, { Component } from 'react';
import './style.css'
// import { Redirect } from 'react-router-dom';
import ReactEcharts from 'echarts-for-react';
import 'echarts-wordcloud'
import request from '../../request';
// import ReactEcharts from 'echarts-for-react';

var plantCap = [{
  name: '居住',
  value: 'Settlements'
}, {
  name: '行政',
  value: 'administration'
}, {
  name: '文化',
  value: 'Culture'
}, {
  name: '医疗',
  value: 'hospital '
}, {
  name: '教育',
  value: 'education '
}, {
  name: '交通',
  value: 'hospital'
}, {
  name: '产业',
  value: 'industry'
}];

var datalist = [{
  offset: [50, 50],
  symbolSize: 120,
  opacity: .95,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#29c0fb'
  }, {
      offset: 1,
      color: '#2dc5b9'
  }]),
}, {
  offset: [38, 70],
  symbolSize: 95,
  opacity: .95,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#35d17e'
  }, {
      offset: 1,
      color: '#49ddb2'
  }]),
}, {
  offset: [23, 43],
  symbolSize: 90,
  opacity: .95,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#e5d273'
  }, {
      offset: 1,
      color: '#e4a37f'
  }]),
}, {
  offset: [44, 26],
  symbolSize: 90,
  opacity: .95,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#277aec'
  }, {
      offset: 1,
      color: '#57c5ec'
  }]),
}, {
  offset: [80, 58],
  symbolSize: 65,
  opacity: .95,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#e54948'
  }, {
      offset: 1,
      color: '#f08456'
  }]),
}, {
  offset: [76, 36],
  symbolSize: 68,
  opacity: .7,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#11c46e'
  }, {
      offset: 1,
      color: '#f08456'
  }]),
}, {
  offset: [64, 75],
  symbolSize: 65,
  opacity: .68,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#ff4141'
  }, {
      offset: 1,
      color: '#ff8989'
  }]),
}];
var datas: any = [];
for (var i = 0; i < plantCap.length; i++) {
  var item = plantCap[i];
  var itemToStyle = datalist[i];
  datas.push({
      name: item.name + '\n' + item.value,
      value: itemToStyle.offset,
      symbolSize: itemToStyle.symbolSize,
      label: {
          normal: {
              textStyle: {
                  fontSize: 18,
                  fontWeight: 800,
                  lineHeight: 22,
              }
          }
      },
      itemStyle: {
          normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity
          }
      },
  })
}


class KeyWord extends Component{

  componentDidMount() {
    request.get('/api/isLogin').then(res => {
      const data: boolean = res.data;
      if (!data) {
        this.setState({
          isLogin: false,
          loading: false
        });
      } else {
        this.setState({
          loading: false
        });
      }
    });

    request.get('/api/showWenCaiData').then(res => {
      const data = res.data;
      if (data) {
        this.setState({ data });
      }
    });
  }

	optionBll = {
    backgroundColor: '#12468500',
    grid: {
        show: false,
        top: 10,
        bottom: 10
    },
    xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
    }],
    yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
    }],
    series: [{
        type: 'effectScatter',
        // symbol: 'circle',
        // symbolSize: 120,

        hoverAnimation: true,
        label: {
            normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                    fontSize: '20'
                }
            },
        },
        itemStyle: {
            normal: {
                color: '#00acea'
            }
        },
        data: datas
    }]
};

  option = {
    title: {
        text: '词云',//标题
        x: 'center',
        textStyle: {
            fontSize: 23
        }
 
    },
    backgroundColor: '#F7F7F7',
    tooltip: {
        show: true
    },
    series: [{
        name: '热点分析',//数据提示窗标题
        type: 'wordCloud',
        sizeRange: [6, 66],//画布范围，如果设置太大会出现少词（溢出屏幕）
        rotationRange: [-45, 90],//数据翻转范围
        //shape: 'circle',
        textPadding: 0,
        rotationStep: 45,
        gridSize: 8,
        shape: 'pentagon',
        width: '100%',
        height: '100%',
        autoSize: {
            enable: true,
            minSize: 6
        },
        textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        data: [{"name":"男神","value":2.64},
        {"name":"好身材","value":4.03},
        {"name":"校草","value":24.95},
        {"name":"酷","value":4.04},
        {"name":"时尚","value":5.27},
        {"name":"阳光活力","value":5.80},
        {"name":"初恋","value":3.09},
        {"name":"英俊潇洒","value":24.71},
        {"name":"霸气","value":6.33},
        {"name":"腼腆","value":2.55},
        {"name":"蠢萌","value":3.88},
        {"name":"青春","value":8.04},
        {"name":"网红","value":5.87},
        {"name":"萌","value":6.97},
        {"name":"认真","value":2.53},
        {"name":"古典","value":2.49},
        {"name":"温柔","value":3.91},
        {"name":"有个性","value":3.25},
        {"name":"可爱","value":9.93},
        {"name":"幽默诙谐","value":3.65}]
    }]
  }

  render() {
    return (
      <div className="wraper">
        <div className="wrapper-ball">
          <ReactEcharts option={this.optionBll} />
        </div>
        {/* <div className="wrapper-key">
          <ReactEcharts option={this.option} />
        </div> */}
      </div>
    )
  }
}

export default KeyWord
